<template>
  <div>
     <div>
        <div class="header">
        <div class="left" @click="$router.go(-1)">
          <i class="iconfont icon-zuobian-copy"></i>
        </div>
        <div> {{name}} </div>
        <div class="right">
           <i class="iconfont icon-sousuo1" @click="add('fiml')"></i>
        </div>
      </div>
     </div>
     <div>
        <van-tabs @click-tab="onClickTab" title-active-color="#ff5f16" line-width="80px" line-height="2px" color="#ff5f16">  
           <van-tab v-for="(item, index) in list.showCinemas" :title="Data(item.showDate)" :key="index"></van-tab>
        </van-tabs>
        <van-dropdown-menu>
          <van-dropdown-item :title="msg" :options="options" ref="item" class="recently">
            <div v-for="(t , index) in AddressList" :key="index" @click="RegionClick([index,t])" :class="{activeClass:num==index}">{{t}}</div>
          </van-dropdown-item>
          <van-dropdown-item v-model="value1" :options="options1"/>
        </van-dropdown-menu>
     </div>
    <ul>
      <li v-for="(t,index) in AllMoviesList" :key="index" @click="CinemaClick(t.cinemaId)">
        <div class="cinema">
          <div class="left">
            <p class="left_txt">{{t.name}}</p>
            <p class="left_address">{{ t.address }}</p>
          </div>
          <div class="right">
            <span class="right_txt">￥{{ t.lowPrice/100 }}</span>
            <span>起</span>
            <p class="right_address">距离未知</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from '@vue/reactivity'
import { useRouter } from 'vue-router';
import { computed, onMounted, watch } from '@vue/runtime-core';
import { useStore } from 'vuex';
import { CinemasDataAPI } from '@/api/index.js'
import { CinemaDataAPI } from '@/api/index.js'
export default {
  name:'Film',
  setup(props) {
    const root = reactive({
      value1:0,
      indexa:0,
      msg:'全城',
      num:0,
      active:0,
      AddressList:[],//每个地区
      AllMoviesList:[],//每天的电影
      list:[],
      CinemasList:[],//所有电影院
      MovieIDofCinemaEveryDay:[],//每个电影院下的id
      showDateId:'',
      options : [
      { text: '全城', value: 0 },
    
    ],
      options1 : [
      { text: '最近去过', value: 0 },
      { text: '离你最近', value: 1 },
    ]
    });

    const store = useStore();
    const item = ref(null)

    onMounted(()=>{
    //  store.dispatch('GET_SOCKET_INFO')
     ShowDate()
     AllMovies()
    })

    //顶部电影名称
    const name = computed(()=>{
      return store.state.name
    })

    
    // 点击每个时间，变成当前时间下的电影
    const onClickTab = (val)=>{
      root.MovieIDofCinemaEveryDay = root.list.showCinemas[val.name].cinemaList;
      root.showDateId= root.list.showCinemas[val.name].showDate
     //console.log(root.showDateId);
    
    }

    // 时间戳转化
    const Data = computed(()=>{
      return function(val){
        let date = new Date(val*1000)
        let month = date.getMonth() +1//月份
        let day = date.getDate()//每日
        let week = date.getDay()//星期
        let MM = day - new Date().getDate()//电影上映的时间减去当天时间得到0-7数字，0是今天
        let time = ''
       if (MM == 0 || MM == 1 || MM == 2) {
       
        switch (MM) { 
          case 0:
            time = "今天";
            break;
          case 1:
            time = "明天";
            break;
          case 2:
            time = "后天";
            break;
        }
      } else {
        switch (week) {
          case 1:
            time = "周一";
            break;
          case 2:
            time = "周二";
            break;
          case 3:
            time = "周三";
            break;
          case 4:
            time = "周四";
            break;
          case 5:
            time = "周五";
            break;
          case 6:
            time = "周六";
            break;
          case 0:
            time = "周日";
            break;
          default:
        }
      }
      
      return `${time}${month}月${day}日`;
      }
    })
    
    // 请求每天的电影数据
    const ShowDate = async () => {
      const { data:res } = await CinemasDataAPI()
      if (res.msg == 'ok') {
      root.list = res.data
      root.MovieIDofCinemaEveryDay = root.list.showCinemas[0].cinemaList;
      root.showDateId= root.list.showCinemas[0].showDate
      //  console.log(root.showDateId);
      }
    }

    //请求全部电影数据
    const AllMovies = async ()=>{
       const { data:res } = await CinemaDataAPI({id:store.state.city.cityId})
       if (res.msg == 'ok') {
           root.CinemasList = res.data.cinemas 
           root.AllMoviesList = root.CinemasList
           root.AddressList = Region()
         //console.log(root.AllMoviesList);
       }
    }

    // 按地区分配
    const Region = (()=>{
       let arr = [...new Set(root.AllMoviesList.map(val => val.districtName))]
        arr.unshift("全城");
        return arr
    })
    
    const RegionClick = (val)=>{
      root.msg = val[1]
      root.num = val[0]
    
      if (val[1] == '全城') {
        root.AllMoviesList = root.CinemasList
       
        item.value.toggle();
      }else{
        root.AllMoviesList=root.CinemasList.filter(t => t.districtName == val[1])
         item.value.toggle();
      }
    
    }

    //每天的电影数据=拿每天的电影id和全部的电影id做比较，返回相同的，就是当天的
    watch(()=> root.MovieIDofCinemaEveryDay,(val)=>{
     root.AllMoviesList = val.map(i=>{
       for(let j of root.CinemasList){
         if (j.cinemaId == i) {
           return j
         }
       }
     })
    })

    const CinemaClick = (cinemaId)=> {
     
      // console.log(root.showDateId , cinemaId , filmId);
      router.push({
        name:'cinemaData',
        params:{
          showDateId:root.showDateId,
          cinemaId:cinemaId,
          filmId:router.currentRoute.value.params.id
        }
      })


    }


    // 动态拼接路由
    const router = useRouter();

    const add = (name) =>{
     router.push(`/${name}/search`)
    }

    return {
      ...toRefs(root),
      add,
      item,
      name,
      Data,
      onClickTab,
      RegionClick,
      CinemaClick
    }
  } 

}
</script>

<style lang="less" scoped>
/deep/.van-dropdown-menu__title--active{
   color:#ff5f16 !important;
}
.activeClass {
  border: 1px solid #ff5f16 !important;
  border-radius: 3px;
  color:#ff5f16 !important;
}
  .header{
    position: fixed;z-index: 999;
    top: 0;
    background: white;
    height: 44px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    border-bottom: 1px solid #ededed;

    & .left{
      margin-left: 15px;
    }
    & .right{
      margin-right: 15px;
    }
  }

  .recently{

    width: 100%;
    /deep/.van-popup{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      
    padding: 5px;
    .van-cell{
      display: none;
    }
  }
  div{
    border: 1px solid #ededed;
    width:calc(25vw - 12.5px);
    text-align: center;
    height: 30px;
    margin: 0 10px 15px 0;
    line-height: 30px ;
    font-size: 12px;
    color: #999;
  }
 }

 /deep/ .van-dropdown-menu__bar{
   box-shadow:none;
   border: 1px solid #ededed;
 }

 .cinema{
  padding: 15px;
   display: flex;
   background: white;
   border-bottom: 1px solid #ededed;
   justify-content: space-between;
  & .left{
    width: calc(100% - 65px);
    & .left_txt{
    font-size: 15px;
  }
  & .left_address{
    margin-top: 5px;
    font-size: 12px;
    color: #797d82;
    max-width: 80%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  }

  & .right{
      text-align:center;
    & .right_txt{
      font-size: 15px;
      color: #ff5f16;
     
    }
    & span{
      font-size: 12px;
       color: #ff5f16;
    }
    & .right_address{
      font-size: 12px;
       color: #797d82;
       margin-top: 5px;
    }
  }
}
/deep/.van-tabs{
   margin-top: 44px;
}


</style>